<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱思教育</title>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="jQuery/jquery-3.6.0.min.js"></script>
    <script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
    <style>
        .main{
            padding: 0;
        }
        .navbar{
            background: url("img/indexHead.png") center center/100% 100% no-repeat;
            opacity: 0.8;
        }
        #carouse{
            background: url("img/IndexCarousel.jpg") center center/100% 100% no-repeat;
        }
        #success{
            background: url("img/indexSuccess.jpg") center center/100% 100% no-repeat;
        }
        #joinUs{
            background: url("img/indexJoinUs.jpg") center center/100% 100% no-repeat;
        }
        .card{
            opacity: 0.8;
        }
        .card:hover{
            opacity: 1;
            transition: opacity 0.5s;
        }
        #info{
            background: url("img/indexTab.png") center center/100% 100% no-repeat;
        }
        .tab-wrap {
            -webkit-transition: 0.3s box-shadow ease;
            transition: 0.3s box-shadow ease;
            border-radius: 6px;
            max-width: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            position: relative;
            list-style: none;
            background-color: #fff;
            margin: 40px 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }
        .tab-wrap:hover {
            box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
        }

        .tab {
            display: none;
        }
        .tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
            opacity: 1;
            -webkit-transition: 0.5s opacity ease-in, 0.8s transform ease;
            transition: 0.5s opacity ease-in, 0.8s transform ease;
            position: relative;
            top: 0;
            z-index: 100;
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            text-shadow: 0 0 0;
        }
        .tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
            opacity: 1;
            -webkit-transition: 0.5s opacity ease-in, 0.8s transform ease;
            transition: 0.5s opacity ease-in, 0.8s transform ease;
            position: relative;
            top: 0;
            z-index: 100;
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            text-shadow: 0 0 0;
        }
        .tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
            opacity: 1;
            -webkit-transition: 0.5s opacity ease-in, 0.8s transform ease;
            transition: 0.5s opacity ease-in, 0.8s transform ease;
            position: relative;
            top: 0;
            z-index: 100;
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            text-shadow: 0 0 0;
        }
        .tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
            opacity: 1;
            -webkit-transition: 0.5s opacity ease-in, 0.8s transform ease;
            transition: 0.5s opacity ease-in, 0.8s transform ease;
            position: relative;
            top: 0;
            z-index: 100;
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            text-shadow: 0 0 0;
        }
        .tab:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5) {
            opacity: 1;
            -webkit-transition: 0.5s opacity ease-in, 0.8s transform ease;
            transition: 0.5s opacity ease-in, 0.8s transform ease;
            position: relative;
            top: 0;
            z-index: 100;
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            text-shadow: 0 0 0;
        }
        .tab:first-of-type:not(:last-of-type) + label {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .tab:not(:first-of-type):not(:last-of-type) + label {
            border-radius: 0;
        }
        .tab:last-of-type:not(:first-of-type) + label {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .tab:checked + label {
            background-color: #fff;
            box-shadow: 0 -1px 0 #fff inset;
            cursor: default;
        }
        .tab:checked + label:hover {
            box-shadow: 0 -1px 0 #fff inset;
            background-color: #fff;
        }
        .tab + label {
            box-shadow: 0 -1px 0 #eee inset;
            border-radius: 6px 6px 0 0;
            cursor: pointer;
            display: block;
            text-decoration: none;
            color: #333;
            -webkit-box-flex: 3;
            -webkit-flex-grow: 3;
            flex-grow: 3;
            text-align: center;
            background-color: #f2f2f2;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
            transition: 0.3s background-color ease, 0.3s box-shadow ease;
            height: 50px;
            box-sizing: border-box;
            padding: 15px;
        }
        .tab + label:hover {
            background-color: #f9f9f9;
            box-shadow: 0 1px 0 #f4f4f4 inset;
        }
        .tab__content {
            padding: 10px 25px;
            background-color: transparent;
            position: absolute;
            width: 100%;
            z-index: -1;
            opacity: 0;
            left: 0;
            -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
            border-radius: 6px;
        }

        /*My card*/
        body .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            max-width: 999999px;
            margin: 0 0;
            background: url("img/indexCard.jpg") center center/100% 100% no-repeat;
            /*opacity: 0.9;*/
            /*background: #232427;*/
        }
        body .container .Card {
            position: relative;
            min-width: 320px;
            height: 440px;
            box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), inset -5px -5px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            margin: 30px;
            transition: .5s;
        }
        body .container .Card:nth-child(1) .box .content a {
            background: #2196f3
        }
        body .container .Card:nth-child(2) .box .content a {
            background: #e91e63;
        }
        body .container .Card:nth-child(3) .box .content a {
            background: #23c186;
        }
        body .container .Card:nth-child(4) .box .content a {
            background: red;
        }
        body .container .Card:nth-child(5) .box .content a {
            background: lightsalmon;
        }
        body .container .Card .box {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            background: magenta;
            opacity: 0.5;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: .5s;
        }
        body .container .Card .box:hover {
            transform: translateY(-30px);
            opacity: 0.9;
        }
        body .container .Card .box:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: rgba(255, 255, 255, 0.03);
        }
        body .container .Card .box .content {
            padding: 20px;
            text-align: center
        }
        body .container .Card .box .content h2 {
            position: absolute;
            top: -10px;
            right: 30px;
            font-size: 8rem;
            color: rgba(255, 255, 255, 0.1);
        }
        body .container .Card .box .content h3 {
            font-size: 1.8rem;
            color: #fff;
            z-index: 1;
            transition: 0.5s;
            margin-bottom: 15px;
        }
        body .container .Card .box .content p {
            font-size: 1rem;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.9);
            z-index: 1;
            transition: 0.5s;
        }
        body .container .Card .box .content a {
            position: relative;
            display: inline-block;
            padding: 8px 20px;
            background: black;
            border-radius: 5px;
            text-decoration: none;
            color: white;
            margin-top: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transition: .5s;
        }
        body .container .Card .box .content a:hover{
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
            background: #fff;
            color: #000;
        }

    </style>
</head>

<body class="main bg-primary container-fluid">

<nav class="navbar navbar-expand navbar-dark fixed-top">

    <a class="navbar-brand col-2 text-center" href="index.html">
        <img src="img/icon.png" alt="" style="max-width: 50px;">
        爱思教育
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link active" href="#info">企业简介</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#success">成功案例</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#buy">购买服务</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#joinUs">加入我们</a>
            </li>
        </ul>
    </div>
    <form class="form-inline">
<!--        <input class="form-control btn-outline-light mr-sm-2" type="search" placeholder="Search" aria-label="Search">-->
        <a class="btn btn-outline-light my-2 my-sm-0" href="userLogin.html" style="margin-right: 10px">登录</a>
        <a class="btn btn-outline-light my-2 my-sm-0" href="userRegister.html">注册</a>
    </form>
</nav>

<div class="bd-example row" id="carouse">
    <div class="col"></div>
    <div class="carousel slide col-10" id="carousel-container" data-ride="carousel" style="margin-top: 56px;">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/indexCarousel1.jpg" class="w-100" style="height: 400px" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>美丽园区</h5>
                    <p>雨后的爱思园是一个美丽的地方</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/indexCarousel2.jpg" class="d-block w-100" style="height: 400px" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>文化园区</h5>
                    <p>在爱思园里，你可以见到很多文化建筑</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/indexCarousel3.jpg" class="d-block w-100" style="height: 400px" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>休闲园区</h5>
                    <p>小荷才露尖尖角，早有蜻蜓立上头</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carousel-container" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel-container" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div class="col"></div>
</div>

<div class="row" id="info">
    <div class="col"></div>
    <div class="tab-wrap col-9">
        <!-- active tab on page load gets checked attribute -->
        <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
        <label for="tab1">公司简介</label>

        <input type="radio" id="tab2" name="tabGroup1" class="tab">
        <label for="tab2">团队结构</label>

        <input type="radio" id="tab3" name="tabGroup1" class="tab">
        <label for="tab3">企业文化</label>

        <div class="tab__content">
            <h3>公司简介</h3>
            <p>爱思是一家世界领先的互联网科技公司，用创新的产品和服务提升全球各地人们的生活品质。</p>
            <p>爱思成立于1998年，总部位于中国深圳。公司一直秉承科技向善的宗旨。我们的通信和社交服务连接全球逾10亿人，帮助他们与亲友联系，畅享便捷的出行、支付和娱乐生活。</p>
            <p>爱思发行多款风靡全球的电子游戏及其他优质数字内容，为全球用户带来丰富的互动娱乐体验。</p>
            <p>爱思还提供云计算、广告、金融科技等一系列企业服务，支持合作伙伴实现数字化转型，促进业务发展。</p>
            <p>爱思2004 年于香港联合交易所上市。</p>
        </div>

        <div class="tab__content">
            <h3>团队结构</h3>
            <h5>周子程</h5>
            <p>爱思主要创办人之一，2014年9月起任爱思终身荣誉顾问，兼爱思学堂荣誉院长。周子程于1999年11月参与创立爱思，出任爱思首席技术官，负责公司专有技术的研发工作，并组建了业内领先的技术团队。周子程于1993年获得深圳大学计算机本科学位，并于1996年获得华南理工大学计算机应用及系统架构硕士学位。</p>

            <h5>赵文甫</h5>
            <p>爱思主要创办人之一，爱思公益慈善基金会发起人兼荣誉理事长。2013年3月起任爱思终身荣誉顾问。赵文甫于1998年参与创立爱思，出任爱思首席行政官，全面负责集团行政、法律、人力资源和公益慈善基金事宜。此外，赵文甫亦负责爱思的管理机制、知识产权、政府关系。加入爱思之前，赵文甫曾在深圳出入境检验检疫局工作数年。赵文甫于1993年获得深圳大学应用化学理学士学位、1996年获得南京大学经济法硕士学位，并于2019年获得新加坡管理大学工商管理博士学位。</p>

            <h5>张杰</h5>
            <p>爱思主要创办人之一，2007年6月起任爱思终身荣誉顾问。张杰于1999年至2007年期间出任爱思首席运营官，负责公司业务范围及产品种类管理，同时管理全国各市场推广工作。加入爱思之前，张杰在深圳市数据通信局工作，熟悉中国互联网及电信行业。</p>

            <h5>赵烁</h5>
            <p>兼任爱思公益慈善基金会理事长，爱思研究院理事长。赵烁于2002年加入爱思，于2007年9月起全面负责集团公共策略、法律事务、信息安全、企业社会责任、行政、工程建设、采购等管理工作，期间负责组建成立爱思公益慈善基金会和牵头创办爱思研究院。</p>
            <p>赵烁毕业于中南财经政法大学，获法学学士学位，并拥有律师资格。</p>

            <h5>王德震</h5>
            <p>2002年加入爱思，自2008年5月起全面负责集团人才发展与管理领域的各项管理职能。加入爱思之前，曾于中兴通讯股份公司从事人力资源管理工作，至今在IT及互联网领域积累逾18年专业人力资源管理从业经验。</p>
            <p>1996年，王德震业于深圳大学计算机应用专业，并于2005年獲得清华大学MBA学位。</p>
        </div>

        <div class="tab__content">
            <h3>企业文化</h3>
            <h5>正直</h5>
            <p>坚守底线，以德为先，坦诚公正不唯上</p>
            <h5>进取</h5>
            <p>无功便是过，勇于突破有担当</p>
            <h5>协作</h5>
            <p>开放协同，持续进化</p>
            <h5>创造</h5>
            <p>超越创新，探索未来</p>
        </div>
    </div>
    <div class="col"></div>
</div>

<div class="card-group" id="success">
    <a class="card btn-outline-info" href="newsList.html">
        <img class="card-img-top" src="img/news/tsinghua.jpg" alt="" style="max-height: 230px;">
        <div class="card-body text-dark">
            <h5 class="card-title">清华大学</h5>
            <p class="card-text">这是一封来自清华大学校长的感谢信。自从使用了爱思软件提供的教务系统之后，该校的管理水平得到了质的飞跃。</p>
        </div>
        <div class="card-footer">
            <small class="text-dark">2005年4月21日</small>
            <span class="badge badge-danger">热</span>
        </div>
    </a>
    <a class="card btn-outline-info" href="newsList.html">
        <img class="card-img-top" src="img/news/lanXiang.jpg" alt="" style="max-height: 230px">
        <div class="card-body text-dark">
            <h5 class="card-title">蓝翔职业技术学院</h5>
            <p class="card-text">这是我们采访的蓝翔学生的新闻。他们的学生在使用了我们的教务系统之后，感觉课程安排更合理了，早八的可也变少了。现在开挖掘机的适合，浑身都是干劲儿。</p>
        </div>
        <div class="card-footer">
            <small class="text-dark">2014年7月16日</small>
            <span class="badge badge-warning">沸</span>
        </div>
    </a>
    <a class="card btn-outline-info" href="newsList.html">
        <img class="card-img-top" src="img/news/qutSenate.png" alt="" style="max-height: 230px">
        <div class="card-body text-dark">
            <h5 class="card-title">青岛理工大学教务处</h5>
            <p class="card-text">这是一个反面的案例。由于青岛理工大学没有采用我们的教务系统，导致青岛理工大学的学生在选课的时候经常因为教务系统太卡而耽误选课。而我们的系统则不存在这样的问题。</p>
        </div>
        <div class="card-footer">
            <small class="text-dark">2021年10月18日</small>
            <span class="badge badge-primary">新</span>
        </div>
    </a>
</div>

<div class="container" id="buy">
    <div class="Card">
        <div class="box">
            <div class="content">
                <h2>01</h2>
                <h3>月度包</h3>
                <p>如果您的学校需要一个教务网站过渡，那这款短期的月度包将是您的不二之选！</p>
                <a onclick="buy()">购买：888元</a>
            </div>
        </div>
    </div>

    <div class="Card">
        <div class="box">
            <div class="content">
                <h2>02</h2>
                <h3>季度包</h3>
                <p>什么？贵校不知道要用什么网站做教务系统。使用一下我们的月度包吧！新用户将会免费加一个月！</p>
                <a onclick="buy()">购买：2488元</a>
            </div>
        </div>
    </div>

    <div class="Card">
        <div class="box">
            <div class="content">
                <h2>03</h2>
                <h3>半年包</h3>
                <p>考虑到大多数学校半年一学期的教学周期，我们特别向那些临时合作伙伴提供了半年期的服务！</p>
                <a onclick="buy()">购买：4488元</a>
            </div>
        </div>
    </div>

    <div class="Card">
        <div class="box">
            <div class="content">
                <h2>04</h2>
                <h3>全年包</h3>
                <p>超值全年包，最高性价比。</p>
                <p>连续购买可以享受8折扣优惠！</p>
                <a onclick="buy()">购买：6988元</a>
            </div>
        </div>
    </div>

    <div class="Card">
        <div class="box">
            <div class="content">
                <h2>05</h2>
                <h3>个性包</h3>
                <p>停，别走！</p>
                <p>没有称心的选项吗？尝试一下私人定制的服务吧，总有一款适合您！</p>
                <a onclick="buy()">联系客服</a>
            </div>
        </div>
    </div>
</div>

<div id="joinUs" class="row">
    <div class="col"></div>
    <div class="card col-3" style="width: 18rem;">
        <img class="card-img-top" src="img/icon.png" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">加入我们</h5>
            <p class="card-text">想要成为我们的一员吗？爱思教育为员工提供了丰厚的福利待遇，还等什么？就等你的加入了！</p>
            <a onclick="join()" class="btn btn-primary">了解详情</a>
        </div>
    </div>
    <div class="col"></div>
</div>

<div class="bg-primary text-center">
    <p class="text-white">版权所有© Copyright 1999-2021 爱思软件股份有限公司　　中国·青岛黄岛区嘉陵江路777号 西区公寓2号   版本V-0.0.1</p>
</div>

</body>
<script src="jQuery"></script>
<script>
    jQuery(function () {
        jQuery('.carousel').carousel({
            interval: 3000
        })
    })
</script>
<script>
    function buy() {
        alert("老师没讲，就拿来公测吧，免费用");
    }
</script>
<script>
    function join() {
        alert("QQ群：419314459");
    }
</script>
</html>